import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Badge } from '@storybook/components';
import { getStorybook, storiesOf} from '@storybook/react';
import { storage } from '@wingsuit-designsystem/pattern';
import LinkTo from '@storybook/addon-links/react';
import './images/background.png';
import './images/ws-tokens.svg';
import './images/ws-atoms.svg';
import './images/ws-molecules.svg';
import './images/ws-organisms.svg';
import './images/ws-templates.svg';


<Meta title="Welcome"
  parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true }}}}
/>

<div style={{margin: 'auto', position: 'relative', marginBottom: '40px'}}>
  <img src="images/background.png" style={{width: '100%' }}/>
  <img src="images/logo.svg" style={{margin: 'auto', maxWidth: '200px', position: 'absolute', bottom: 0, top: 0, left: 0, right: 0}}/>
</div>

# Design system

Wingsuit demo page with components from <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>, <a href="https://mertjf.github.io/tailblocks/" target="_blank">Tailblocks</a> and <a href="https://www.tailwindtoolbox.com" target="_blank"> tailwindtoolbox.com</a>

Design and images from <a href="https://www.drawkit.io/product/peach-illustration-system" target="_blank">drawkit</a>.

<div style={{paddingTop: '40px'}}>

  ## <img src="images/ws-tokens.svg" style={{width: '20px'}}/> Tokens
  <Canvas>
    <LinkTo story="page" kind="Tokens/Colors">
      <Badge status="neutral">Colors</Badge>
    </LinkTo>
    <LinkTo story="page" kind="Tokens/Typography">
      <Badge status="neutral">Typography</Badge>
    </LinkTo>
    <LinkTo story="page" kind="Tokens/Icons">
      <Badge status="neutral">Icons</Badge>
    </LinkTo>
  </Canvas>

  ## <img src="images/ws-atoms.svg" style={{width: '20px'}}/> Atoms
  <Canvas>
    {
      storage.loadPatternsByNamespace('Atoms').map((pattern)=>{
        return (
          <LinkTo key={pattern.getId()} story={pattern.getDefaultVariant().getLabel()} kind={`${pattern.getNamespace()}-${pattern.getId()}`}>
            <Badge status="neutral">{pattern.getLabel()}</Badge>
          </LinkTo>
        )
      })
    }
  </Canvas>


  ## <img src="images/ws-molecules.svg" style={{width: '20px'}}/> Molecules
  <Canvas>
    {
      storage.loadPatternsByNamespace('Molecules').map((pattern)=>{
        return (
          <LinkTo key={pattern.getId()} story={pattern.getDefaultVariant().getLabel()} kind={`${pattern.getNamespace()}-${pattern.getId()}`}>
            <Badge status="neutral">{pattern.getLabel()}</Badge>
          </LinkTo>
        )
      })
    }
  </Canvas>

  ## <img src="images/ws-organisms.svg" style={{width: '20px'}}/> Organisms
  <Canvas>
    {
      storage.loadPatternsByNamespace('Organisms').map((pattern)=>{
        return (
          <LinkTo key={pattern.getId()} story={pattern.getDefaultVariant().getLabel()} kind={`${pattern.getNamespace()}-${pattern.getId()}`}>
            <Badge status="neutral">{pattern.getLabel()}</Badge>
          </LinkTo>
        )
      })
    }
  </Canvas>

  ## <img src="images/ws-templates.svg" style={{width: '20px'}}/> Templates
  <Canvas>
    {
      storage.loadPatternsByNamespace('Templates').map((pattern)=>{
        return (
          <LinkTo key={pattern.getId()} story={pattern.getDefaultVariant().getLabel()} kind={`${pattern.getNamespace()}-${pattern.getId()}`}>
            <Badge status="neutral">{pattern.getLabel()}</Badge>
          </LinkTo>
        )
      })
    }
  </Canvas>
</div>
